<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			padding:0;
			margin:0;
		}
		body{
               height: 2000px;
		}
		div{
			width: 100px;
			height: 100px;
			background: red;
		}
		img{
			margin-top: 1800px;
		}
		
	</style>
</head>
<body>
	<div></div>
	<img src=" "_src="x1.jpg" alt="">
	你好
</body>
</html>	
<script>
     
	HTMLElement.prototype.getTop = function(){
		function f(e){
			if(!e.offsetParent) return 0;
			var top = e.offsrtTop + e.offsetParent.clientTop;
			return top + f(e.offsetParent);
		}
		return f(this);
	};

	//获取图片
	var oImg = document.querySelector("img");
	//页面滚动时会执行该方法
	//滚动事件
	window.onscroll = function(){

		loadImg();

	oImg.onload = function(){
		//图片加载成功事件
		//图片加载成功后才能获取width和height属性的值
		console.log(this.width);
		console.log(this.height);
	};

	

		// console.log(document.body.scrollTop);
		// console.log(document.documentElement.scrollTop);

	};
	function loadImg(){
        //浏览器窗口的高度
		var h1 = document.documentElement.clientHeight;
		console.log(h1);

		//图片距离浏览器顶端的距离
		var h2 = oImg.getTop();
		console.log(h2);

		var scrollTop = document.documentElement.scrollTop;

		if(scrollTop >= h2 - h1){
			//获取属性的值
			var _src = oImg.getAttribute("_src");
			oImg.src = _src;
			window.onscroll = null;
		}


		//console.log(document.documentElement.scrollTop);

	}
</script>